import React from 'react';
import { Table, Statistic, Icon, Tag,message} from 'antd';
import './index.less';
import Axios from '../../api/index.jsx';
import Tool from '../../tool/index.jsx';
const _tool = new Tool();
const { CheckableTag } = Tag;

class Detail extends React.Component {
  constructor(props){
    super(props);
    this.state={
      id: (this.props.location.state || {} ).pid, //获取路径参数
      detail: {},
      starColor: '#52c41a',
      isCollect: false,
      value: 1314,
      islike:false,
      process: []
    }
  }
  componentDidMount(){
    this.getDetail();
  }
  //申请菜单详情接口
  getDetail = () => {
    const id = this.state.id;
    if(id){
      Axios
      .jsonp({
        url: `https://api.jisuapi.com/recipe/detail?id=${id}&appkey=606d66626b732ca1`
      })
      .then(res => {
        if (res.status === 0) {
          this.setState({
            detail: res.result,
            process: res.result.process
          })
        }
      },error=>{
        _tool.errorTips(error);
      })
    }   
  }
  //点赞
  goToLike(){
    let value = this.state.value
    let isLike = this.state.isLike
    if (!this.state.isLike) {
      value++
      isLike = true
    } else {
      value--
      isLike = false
    }
    this.setState({
      value,
      isLike
    })
  }
  //收藏
  goToCollection(){
    let starColor = this.state.starColor
    let isCollect = this.state.isCollect
    const id = this.state.id
    const menuName = this.state.detail.name
    if (isCollect === false) {
      starColor = '#FDDA04'
      isCollect = !isCollect
      localStorage.setItem(menuName, id)
    } else {
      starColor = '#52c41a'
      isCollect = !isCollect
      localStorage.removeItem(menuName)
    }
    this.setState({
      starColor,
      isCollect
    })
    message.success((isCollect ? '收藏成功' : '取消收藏'), 1)
  }

  render() {
    const detail = this.state.detail;
    const tags = detail.tag ?  _tool.toArray(detail.tag).slice(0 ,6) : [];
    const columns = [
      {
        title: '用料',
        dataIndex: 'mname',
        key: 'mname'
      },
      {
        title: '用量',
        dataIndex: 'amount',
        key: 'amount'
      },
      {
        title: '类型',
        dataIndex: 'type',
        key: 'type'
      }
    ];
    return (
      <div className="wrapper">
        <div className="info">
          <img className="img" src={detail.pic} alt="图片"/>
          <div className="introduce">
            <h2 className="menu-name">
              <span>{detail.name}</span>
            </h2>
            <h4>准备时间：{detail.preparetime}</h4>
            <h4>制作时间：{detail.cookingtime}</h4>
            <h4>用餐人数：{detail.peoplenum}</h4>
            <div className="tags">
              <h5 style={{ marginRight: 8, display: 'inline' }}>所属标签:</h5>
              {tags.map((tag)=> (
                <CheckableTag key={tag} >
                  {tag}
                </CheckableTag>
              ))}
            </div>
            <div className="statistic">
              <Statistic title="尝试人数" value={112893} className="statistic-item"/>
              <Statistic
                className="statistic-item"
                title="支持一下"
                value={this.state.value}
                prefix={
                  this.state.isLike 
                  ? <Icon type="like" theme="twoTone" twoToneColor="#52c41a" onClick={(e)=>{this.goToLike()}} className="like"/>
                  : <Icon type="like"  onClick={(e)=>{this.goToLike()}} className="like"/>
                 }
              />
              <Icon type="star" theme="twoTone" twoToneColor={this.state.starColor} style={{ fontSize: 30 }} 
                   onClick={(e)=>{this.goToCollection()}}/>
            </div>
          </div>
        </div>
        <div className="describe" >
          <span className="marks">“</span>
          <span dangerouslySetInnerHTML={{ __html: detail.content }}></span>
          <span className="marks">”</span>
        </div>
        <div className="ingredients">
          <h3><Icon className="icon" type="shopping" theme="twoTone" twoToneColor="#52c41a"/>食材准备</h3>
          <Table columns={columns} rowKey={(record,index)=> index} dataSource={detail.material} size="small" pagination={false}/>
        </div>
        <div className="process">
          <h3><Icon className="icon" type="shopping" theme="twoTone" twoToneColor="#52c41a" />{detail.name}的做法</h3>
          {

           this.state.process.map((step, index) => (
               <div className="process-item" key={index}>
                  <img className="process-item_img" src={step.pic} alt="材料" />
                  <div className="process-item_des">
                    <div className="step">{index+1}</div>
                    <p className="describe" dangerouslySetInnerHTML={{__html: step.pcontent}}></p>
                  </div>
              </div>
           ))
          }
        </div>
      </div>
    );
  }
}
export default Detail;
